<template>
  <u-swiper :list="carDetails" circular :autoplay="true" radius="0"  @change="e => currentNum = e.current"
  :indicator="true" indicatorMode="dot" height="250" indicatorStyle="right: 20px">
    <view slot="indicator" class="indicator-num" >
      <text class="indicator-num__text">{{ currentNum + 1 }}/{{ carDetails.length }}</text>
    </view>
  </u-swiper>
</template>

<script>
  export default {
    props:{
      carDetails:{
        type:Array,
        default(){
          return []
        }
      }
    },
    data() {
      return {
        currentNum:0,
      };
    }
  }
</script>

<style lang="scss">
  .indicator-num {
    padding: 2px 0;
    background-color: rgba(0, 0, 0, 0.35);
    border-radius: 100px;
    width: 35px;
    @include flex;
    justify-content: center;

    &__text {
      color: #FFFFFF;
      font-size: 12px;
    }
  }
</style>
